import React, { Component } from 'react'
import $ from 'jquery'
import Stepper from '../../components/Stepper'
import './index.scss'
import { Icon, Cascader } from 'antd';


export default class ProDetail extends Component {
  constructor() {
    super()
    this.state = {
      bigImglist: [],
      middleImglist: [],
      smallImglist: [],
      iconUrl: '',
      options: [
        {
          value: '河北省',
          label: '河北省',
          children: [
            {
              value: '石家庄市',
              label: '石家庄市',
              children: [
                {
                  value: '路南区',
                  label: '路南区',
                },
              ],
            },
            {
              value: '唐山市',
              label: '唐山市',
              children: [
                {
                  value: '路南区',
                  label: '路南区',
                }
              ]
            }
          ],
        },
        {
          value: '北京市',
          label: '北京市'
        },
        {
          value: '山西省',
          label: '山西省'
        },
        {
          value: '内蒙古自治区',
          label: '内蒙古自治区'
        },
        {
          value: '辽宁省',
          label: '辽宁省'
        },
        {
          value: '吉林省',
          label: '吉林省'
        },
        {
          value: '黑龙江省',
          label: '黑龙江省'
        }
        ,
        {
          value: '上海市',
          label: '上海市'
        },
        {
          value: '江苏省',
          label: '江苏省'
        },
        {
          value: '浙江省',
          label: '浙江省'
        },
        {
          value: '安徽省',
          label: '安徽省'
        },
        {
          value: '福建省',
          label: '福建省'
        },
        {
          value: '江西省',
          label: '江西省'
        },
        {
          value: '湖南省',
          label: '湖南省'
        }
      ],
      // 页数
      pageIndex: 1,
      //页面信息
      proInfolist: {},
      sizelist: [],
      //点击的第几个
      index: 0,
      // pageId:0,
      value: 1
    }
  }
  render () {
    // console.log( this.state.sizelist[0])
    return (
      <div className="proDetail">
        {/* 商品图片行 */}
        <div className="tit-line main clearfix">
          {/* 商品图片 */}
          <div className="left">
            {/* 图片展示区 */}
            <div className="imgBox" onMouseEnter={this.MidImgEnter} onMouseLeave={this.MidImgLeave} onMouseMove={this.MidImgMove}>
              {
                this.state.middleImglist.map((item, index) => {
                  return <img className={index === 0 ? "midImg mid" : "mid"} src={item.MidImg} alt="" key={item.id} />
                })
              }
              {/* <div className="BigBox"> */}
              {
                this.state.bigImglist.map((item, index) => {
                  return <img className="BigImg" src={item.BigImg} alt="" key={item.id} />
                })
              }
              {/* </div> */}
            </div>
            {/* 小图列表 */}
            <div className="litImgList clearfix">
              {
                this.state.smallImglist.map(item => {
                  return <img src={item.SmallImg} alt="" key={item.id} onMouseEnter={this.smallImgEnter} />
                })
              }
            </div>
            <div className='shareLine'>
              <span>商品编码:59589201</span>
              <span><i style={{ 'backgroundImage': `url(${this.state.iconUrl})` }} />收藏商品</span>
              <span>分享到</span>
            </div>
            <img src="https://shop.vipstatic.com/img/detail/pc_xuanguan.png" alt="" />
          </div>
          {/* 商品款式信息 */}
          <div className="right">
            <p className="brand">{this.state.proInfolist.pro_brand}</p>
            <p className="title">{this.state.proInfolist.pro_title}</p>
            <div className="detailTit">{this.state.proInfolist.pro_describe}</div>
            {/* </div> */}
            <div className="priceBox">
              <span className="discount">折后价</span>
              <span className="discPrice">¥{this.state.proInfolist.pro_discount_price}</span>
              <span className="oldPrice">¥{this.state.proInfolist.pro_market_price}</span>
              <span className="disNum">{this.state.proInfolist.pro_discount}折</span>
              <p className="vipPrice">唯品价 ¥{this.state.proInfolist.pro_vip_price}</p>
            </div>
            <p className="dliver"><span>配送:<Cascader className="Cascader" options={this.state.options} onChange={this.onChange} changeOnSelect placeholder="请选择配送地址" /></span></p>
            <p className="dliverPrice"><span>运费:</span>:新会员专享首单满38元免邮（限唯品自营商品，部分商品不可用）</p>
            <div className="size clearfix">
              <span>尺码:</span>
              <div className="sizeCon">
                {
                  // this.state.sizelist[0] ?
                  this.state.sizelist.map(el => {
                    return <i key={el.id}>{el.deail_size}</i>
                  })
                  // : ''
                }
                <p>录入您的尺码信息，精准推荐尺码：<em>录入尺码信息</em></p>
              </div>
            </div>
            <div className="deliverNum">
              <span>数量:</span>
              <Stepper className="Stepper" getStepValue={this.getStepValue}></Stepper>
            </div>
            {/* 加入购物车 */}
            <div className="btnBox">
              <button onClick={this.toCart}>加入购物袋</button>
              <Icon className="icon" type="shopping" theme="twoTone" twoToneColor="#fff" />
            </div>
            <p className="custService"> <span>客服:</span>
              <img src="https://shop.vipstatic.com/img/detail/customer-hash-20e29e90.gif?91015c29" alt="" />
              在线客服(09:00-22:00)</p>
            <p className="service"> <span>服务:</span>
              <i style={{ 'backgroundImage': `url(${this.state.iconUrl})` }} />唯品会自营
              <i style={{ 'backgroundImage': `url(${this.state.iconUrl})` }} />7天可退（需保留原包装）
              <i style={{ 'backgroundImage': `url(${this.state.iconUrl})` }} />退货无忧
              <i style={{ 'backgroundImage': `url(${this.state.iconUrl})` }} />7天可换
            </p>
          </div>
        </div>
        {/* 商品信息 */}
        <div className="product-information main">
          <div className="navigat clearfix" onClick={this.handleClick}>
            <span className="current"><a href="#size">尺码参数</a></span>
            <span><a href="#display">商品展示</a></span>
            <span><a href="#comments">全部口碑(535)</a></span>
            {/* <span><a href="#consult">商品咨询</a></span>
            <span><a href="#about">关于我们</a></span> */}
          </div>
          {/* 尺码参数 */}
          <div className="size-line" id="size">
            <div className="pro-size">
              <div className="size-titleBox">
                <p className="size-title">
                  <i className="size-icon" style={{ 'backgroundImage': `url(${this.state.iconUrl})` }}></i>
                  商品尺码
                <span>SIZE</span>
                </p>
              </div>
              <p className="compare-table">
                <span>尺码对照表:</span>
                <span><Icon type="exclamation-circle" theme="twoTone" twoToneColor="#007CFF" />温馨提示</span>
              </p>
              <table>
                <thead>
                  <tr>
                    <td>尺码</td>
                    <td>号型</td>
                    <td>肩宽(cm)</td>
                    <td>胸围(cm)</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>S</td>
                    <td>170/92A</td>
                    <td>42</td>
                    <td>89-91</td>
                  </tr>
                </tbody>
              </table>
              {/* 价格走势 */}
              <div className="size-titleBox">
                <p className="size-title">
                  <i className="size-icon" style={{ 'backgroundImage': `url(${this.state.iconUrl})` }}></i>
                  价格走势
                <span>PRICE</span>
                </p>
              </div>
              <div className='priceLine'>
                <img alt="" src='https://shop.vipstatic.com/img/detail/price_3-hash-05f780e7.png?dcc12919' />
                <div className="price-history">历史售卖价¥258</div>
                <div className="price-discount">
                  <span>折后价</span>¥258
                </div>
                <div className="price-afterterm">活动结束后¥258</div>
              </div>
            </div>
          </div>
          {/* 商品展示 */}
          <div className="product-display" id="display">
            <div className="size-titleBox">
              <p className="size-title">
                <i className="size-icon" style={{ 'backgroundImage': `url(${this.state.iconUrl})` }}></i>
                商品展示
                <span>IMAGE</span>
              </p>
            </div>
            {
              // console.log(this.state.bigImglist)
              this.state.bigImglist.map(el => {
                return <img key={el.id} className="detail-image" alt="" src={el.BigImg} />
              })
            }
            {/* <img className="detail-image" alt="" src="https://a.vpimg3.com/upload/merchandise/pdcvis/2019/08/20/12/3d9dcf8e-9722-45d5-918f-d922b626e481.jpg" /> */}
          </div>
          {/* 全部口碑 */}
          <div className="comments-line" id="comments">
            <div className="comments-titleLine">
              <div className="comments-title">全部口碑</div>
              <div className="comments-content clearfix">
                <div className="comments-left">
                  <p className="percentage">98.91%</p>
                  <p>的用户对商品满意</p>
                </div>
                <div className="comments-right">
                  <span>好评</span>
                  <span>差评</span>
                </div>
              </div>
            </div>
          </div>
          {/* 全部口碑----评论 */}
          <div className="AllComments">
            <div className="every-comment clearfix">
              <div className="everyComment-left clearfix">
                <img alt="" src="https://h2.appsimg.com/b.appsimg.com/upload/mcp/2017/09/21/195/150598438091.png" />
                <div className="userLine">
                  <p className="username">139*****282</p>
                  <p className="vip-grade">白金卡会员</p>
                </div>
              </div>
              <div className="everyComment-right">
                <p className="comment-content">
                  这款T恤纯棉的，当时价格优惠拍了两件不同码号，但儿子出差没有回来，怕码子选错只好退货，退货后价格又不优惠了，只好等待，终于等到优惠价，豪不犹豫出手拍下，超级喜欢的，点赞赞赞赞赞赞赞赞赞赞赞赞赞赞
                  </p>
                <p className="choosesize">
                  颜色:<span>黑色</span>
                  尺码:<span>XL</span>
                </p>
                <p className="comment-time">2019-12-03 10:49:54</p>
              </div>
            </div>
            <div className="every-comment clearfix">
              <div className="everyComment-left clearfix">
                <img alt="" src="https://h2.appsimg.com/b.appsimg.com/upload/mcp/2017/09/21/195/150598438091.png" />
                <div className="userLine">
                  <p className="username">139*****282</p>
                  <p className="vip-grade">白金卡会员</p>
                </div>
              </div>
              <div className="everyComment-right">
                <p className="comment-content">
                  这款T恤纯棉的，当时价格优惠拍了两件不同码号，但儿子出差没有回来，怕码子选错只好退货，退货后价格又不优惠了，只好等待，终于等到优惠价，豪不犹豫出手拍下，超级喜欢的，点赞赞赞赞赞赞赞赞赞赞赞赞赞赞
                  </p>
                <p className="choosesize">
                  颜色:<span>黑色</span>
                  尺码:<span>XL</span>
                </p>
                <p className="comment-time">2019-12-03 10:49:54</p>
              </div>
            </div>
          </div>
          {/* 全部口碑----翻页 */}
          <div className="pageLine">
            <span className="pageBox clearfix">
              <span className="minus">-</span>
              <input type="text" value={this.state.pageIndex} onChange={this.pageChange} />
              <span className="plus">+</span>
              第{this.state.pageIndex}页
            </span>
          </div>
        </div>
      </div >
    )
  }
  componentDidMount () {
    // console.log(newProps)
    this.getProInfomation('HomeData', 'first', 1)
    this.getImgBox()
    // window.
    window.scrollTo(0, 0)
    // console.log(window.scrollTo(0,0))
  }
  shouldComponentUpdate (newProps) {
    let newArr = newProps.location.pathname.split('/')
    this.getProInfomation(newArr[2], newArr[3], newArr[4])

    // console.log(newArr[4])
    //2.3.4
    return true
  }
  //拿页面详情
  // 
  async getProInfomation (Type, littype, litId) {
    // console.log('http://127.0.0.1:8888/api/goodslist/' + Type + '/' + littype + '/' + litId)
    let { data } = await this.$axios.get('http://127.0.0.1:8888/api/goodslist/' + Type + '/' + littype + '/' + litId)
    // let { data } = await this.$axios.get('http://127.0.0.1:8888/api/goodslist/HomeData/first/3')

    let newArr = []
    if (!Array.isArray(data.size)) {
      newArr.push(data.size)
    } else {
      // console.log(data.size)
      newArr = data.size
    }
    // console.log(newArr[0].deail_size.length)
    // if (newArr[0].deail_size.length === 0) {
    //   newArr[0] = ''
    // }
    this.setState({
      proInfolist: data.info[0],
      bigImglist: data.BigiMG,
      middleImglist: data.MidiMG,
      smallImglist: data.SmalliMG,
      sizelist: newArr
    })
  }
  //拿图片
  getImgBox = async () => {
    let { data } = await this.$axios.get(' http://localhost:5000/detail')
    this.setState({
      //     // bigImglist: data.imgBox.BigImg,
      //     // middleImglist: data.imgBox.MidImg,
      //     // smallImglist: data.imgBox.littleImg,
      iconUrl: data.inconUrl
    })
  }
  //地址配送
  onChange (value) {
    console.log(value);
  }
  //tab栏
  handleClick = () => {
    $('.navigat').on("click", "span", function () {
      // eslint-disable-next-line 
      $(this).addClass("current").siblings().removeClass("current")
    })
  }
  //页数改变
  pageChange () {

  }
  //小图鼠标移入
  smallImgEnter = () => {
    var newIndex = 0
    let self = this
    $(".litImgList").on("mouseenter", "img", function () {
      $(this).addClass("imgCurrent").siblings().removeClass("imgCurrent")
      newIndex = $(this).index()
      $(".imgBox").children(".mid").eq(newIndex).addClass("midImg").siblings().removeClass("midImg")
      // console.log($(".imgBox").children("img").eq($(this).index()))
      self.state.index = newIndex
    })
  }
  //进入中图
  MidImgEnter = () => {
    // console.log(1)
    // console.log(this.state.index)
    $(".imgBox").children(".BigImg").eq(this.state.index).addClass("ActBigImg").siblings().removeClass("ActBigImg")
    // ActBigImg
  }
  MidImgLeave = () => {
    $(".imgBox").children(".BigImg").removeClass("ActBigImg")
  }
  MidImgMove = (e) => {
    //比例=大图/中图=大框/小框
    let scale = $(".midImg").width() / $(".ActBigImg").width()
    let x = e.pageX - parseInt($(".imgBox").offset().left)
    let y = e.pageY - parseInt($(".imgBox").offset().top)
    let BigX = parseInt(x / scale)
    let BigY = parseInt(y / scale)
    // console.log(BigY)
    if (BigX >= 700) {
      BigX = 700
    }
    if (BigY >= 750) {
      BigY = 750
    }
    $(".ActBigImg").css({
      left: -BigX,
      top: -BigY
    })
  }
  //加入购物车
  toCart = async () => {
    let pageId =Number( this.props.location.pathname.split('/')[4])
    // let { data } = await this.$axios.get('http://127.0.0.1:8888/api/goodslist/HomeData/first/' + pageId)
    let localCart = JSON.parse(localStorage.getItem('cart') || '[]')
    let flag = false
    // console.log(pageId)
    localCart.forEach(el => {
      //有重复的id，数量+1
      if (el.pro_id === pageId) {
        el.count += this.state.value
        flag = true
      }
    })
    // let proSmall = this.state.smallImglist[0].SmallImg
    // let infoPro = this.state.proInfolist
    //没有重复的id
    if (!flag) {
      localCart.push({
        pro_id: this.state.proInfolist.pro_id,
        pro_title: this.state.proInfolist.pro_title,
        pro_img: this.state.proInfolist.pro_img,
        pro_vip_price: this.state.proInfolist.pro_vip_price,
        count: this.state.value
      })
    }
    // console.log(this.state.value)
    localStorage.setItem("cart", JSON.stringify(localCart))
  }
  //拿stepper里面的value值
  getStepValue = (num) => {
    this.setState({
      value: num
    })
  }
}

